<template>
  <div>
    <table id="ds" width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13"
           align="center">
      <tr v-for="(item,index) in columns" :key="index" :height="computerHeight(item[0].height)">
        <template v-for="(sample,i) in item">
          <td :style="{'background':bgColor,'color':titleColor }" v-if="!sample.hideTitle" :rowspan="sample.rows"
              :width="computerWidth(1)" class="btbg font-center titfont" :key="sample.title">
            <span v-if="sample.required" style="color: red;">*</span>
            {{sample.title}}
          </td>
          <td :colspan="sample.cols" :rowspan="sample.rows" :width="computerWidth(sample.cols)" :key="i"
              style="background: white;" :class=" sample.type=='textarea' ? 'top' : '' ">
            <template v-if="sample.type=='text'">
              <Input type="text" class="myInput" :clearable="true" :readonly="sample.readonly||!editAble" v-model="data[sample.name]"
                     placeholder="" :style="{ 'width': '100%','line-height': computerHeight(item[0].height)}"/>
            </template>
            <template v-if="sample.type=='textarea'">
              <Input type="textarea" :rows="sample.rowsSize" :readonly="sample.readonly||!editAble" class="myInput"
                     v-model="data[sample.name]" placeholder="" style="width:100%;height: 100%"/>
            </template>
            <template v-if="sample.type=='password'">
              <Input type="password" class="myInput" :readonly="sample.readonly||!editAble" v-model="data[sample.name]"
                     placeholder="" :style="{ 'width': '100%','line-height': computerHeight(item[0].height)}"/>
            </template>
            <template v-if="sample.type=='radio'">
              <RadioGroup v-model="data[sample.name]" style="margin-left: 20px">
                <template v-for="a in sample.data">
                  <Radio :key="a.key" :label="a.key" :disabled="!editAble">
                    <span>{{a.value}}</span>
                  </Radio>
                </template>
              </RadioGroup>
            </template>
            <template v-if="sample.type=='checkbox'">
              <CheckboxGroup v-model="data[sample.name]" style="margin-left: 20px" :disabled="!editAble">
                <Checkbox :label="a.key" v-for="(a,j) in sample.data" :key="j" :disabled="!editAble">
                  <span>{{a.value}}</span>
                </Checkbox>
              </CheckboxGroup>
            </template>
            <template v-if="sample.type=='select'">
              <Select v-model="data[sample.name]" class="myInput" :clearable="true"
                      :style="{ 'width': '100%','line-height': computerHeight(item[0].height)}" :disabled="!editAble">
                <Option v-for="(a,l) in sample.data" :key="l" :value="a.key">{{ a.value }}</Option>
              </Select>
            </template>
            <template v-if="sample.type=='switch'">
              <i-switch true-value="Y" false-value="N" v-model="data[sample.name]" style="margin-left: 20px"
                        :disabled="!editAble">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
              </i-switch>
            </template>
            <template v-if="sample.type=='file'">
              <Upload
                multiple
                :action="sample.action">
                <Button icon="ios-cloud-upload-outline">Upload files</Button>
              </Upload>
            </template>
            <template v-if="sample.type=='slider'">
              <Slider v-model="data[sample.name]" :tip-format="format"
                      style="margin-left: 20px;margin-right: 20px"></Slider>
            </template>
            <template v-if="sample.type=='date'">
              <DatePicker class="myInput" :value="data[sample.name]" format="yyyy-MM-dd"
                          @on-change="data[sample.name]=$event" :type="sample.type" :options="options1"
                          placeholder="选择日期" style="width: 100%" :readonly="!editAble"></DatePicker>
            </template>
            <template v-if="sample.type=='datetime'">
              <DatePicker class="myInput" :value="data[sample.name]" format="'yyyy-MM-dd HH:mm:ss'"
                          @on-change="data[sample.name]=$event" :type="sample.type" :options="options1"
                          placeholder="选择日期时间" style="width: 100%" :readonly="!editAble"></DatePicker>
            </template>
            <template v-if="sample.type=='time'">
              <TimePicker class="myInput" v-model="data[sample.name]" type="time" placeholder="选择时间" style="width: 100%"
                          :disabled="!editAble"></TimePicker>
            </template>
            <template v-if="sample.type=='number'">
              <InputNumber class="inputNumber" style="width:100%;border: none;box-shadow:none;" :max="sample.max"
                           :min="sample.min" :step="sample.step" v-model="data[sample.name]"
                           :readonly="sample.readonly||!editAble"></InputNumber>
            </template>
            <template v-if="sample.type=='color'">
              <ColorPicker v-model="data[sample.name]" alpha/>
            </template>
            <template v-if="sample.type=='complete'">
              <AutoComplete
                v-model="data[sample.name]"
                class="myInput"
                :disabled="!editAble"
                style="width:100%">
                <div class="demo-auto-complete-item">
                  <Option :value="item" :key="i" v-for="i in sample.data">
                    <span class="demo-auto-complete-title">{{ i }}</span>
                  </Option>
                </div>
              </AutoComplete>
            </template>
          </td>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>

export default {
  name: 'form-table',
  data: function () {
    return {
      options1: {
        shortcuts: [
          {
            text: '今天',
            value () {
              return new Date()
            },
            onClick: (picker) => {
            }
          },
          {
            text: '昨天',
            value () {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            },
            onClick: (picker) => {
            }
          },
          {
            text: '星期前',
            value () {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            },
            onClick: (picker) => {
            }
          }
        ]
      }
      // data: [{
      //   'name': 'projectName',
      //   'value': ''
      // }, {
      //   'name': 'projectType',
      //   'value': 'N'
      // }],
      // columns: [
      //   [{
      //     name: 'projectName',
      //     title: '项目名称',
      //     type: 'complete',
      //     width: '20%',
      //     height: '50px',
      //     hideTitle: false,
      //     action: '//jsonplaceholder.typicode.com/posts/',
      //     required: true,
      //     rows: 2,
      //     data: [{
      //       key: 'apple',
      //       value: '苹果 '
      //     },
      //     {
      //       key: 'hamigua',
      //       value: '哈密瓜 '
      //     }
      //     ]
      //   }]
      // ]
    }
  },
  props: {
    editAble: {
      type: Boolean,
      default: true
    },
    cols: {
      type: Number,
      default: 0
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    titleColor: {
      type: String,
      default: '#444'
    },
    completeData: {
      type: Array,
      default () {
        return []
      }
    },
    rowHeight: {
      required: false,
      type: String,
      default: '40px'
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    computerWidth (cols) {
      let width = 100 / this.cols * cols
      return width + '%'
    },
    computerHeight (height) {
      if (height === undefined || height === '0px') {
        return this.rowHeight
      }
      return height
    },
    format (val) {
      return val + '%'
    }
  }
}
</script>

<style>
  input {
    outline: none;
    border: white;
    padding: 0px 5px;
    font-size: 12px;
  }

  select {
    font-size: 15px;
  }

  option {
    font-size: 15px;
  }

  .tabtop13 {
    margin-top: 13px;
    table-layout: fixed;
  }

  .top {
    vertical-align: top;
  }

  .tabtop13 td {
    height: 30px;
    line-height: 150%;
    word-wrap: break-word;
    border: 1px solid #cccccc;
  }

  .font-center {
    text-align: center
  }

  .btbg {
    background: #fff;
  }

  .btbg1 {
    background: #f2fbfe !important;
  }

  .btbg2 {
    background: #f3f3f3 !important;
  }

  .biaoti {
    font-family: 微软雅黑;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px dashed #CCCCCC;
    color: #255e95;
  }

  .titfont {

    font-family: 微软雅黑;
    font-size: 12px;
    color: #255e95;
    /*background: url(../images/ico3.gif) no-repeat 15px center;*/
    background-color: #e9faff;
  }

  .tabtxt2 {
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    color: #327cd1;
  }

  .tabtxt3 {
    font-family: 微软雅黑;
    font-size: 14px;
    padding-left: 15px;
    color: #000;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
  }

  .hide {
    border: none;
  }
</style>
<style scoped>
  /deep/ .myInput input {
    border: none;
    font-size: 15px;
    border-radius: 0px;
  }

  /deep/ .myInput input:focus {
    outline: none;
    box-shadow: none;
  }

  /deep/ .myInput textarea {
    border: none;
    font-size: 15px;
    border-radius: 0px;
  }

  /deep/ .myInput textarea:focus {
    outline: none;
    box-shadow: none;
  }

  /deep/ .myInput .ivu-select-selection {
    border: none;
  }

  /deep/ .myInput .ivu-select-selection:focus {
    outline: none;
    box-shadow: none;
  }
</style>
